<template>
  列表控件，基于el-table二次开发，可以通过拖拽表头（th）实现调整顺序、移除、对齐等操作<br>
  支持快捷键翻页 —— 数字键：到页号；方向键（支持wasd）：上一页、下一页、首页、末页；Home：首页；End：末页
  <hr>
  <nf-grid
    v-grid-drag="gridMeta"
    :dataList="dataList"
    v-bind="gridMeta"
    :selection="selection"
  >
  </nf-grid>
  <el-pagination
    background
    layout="prev, pager, next"
    v-model:currentPage="pagerInfo.index"
    :total="pagerInfo.total"
  >
  </el-pagination>
  <div
    v-for="(item, key, index) in selection"
    :key="'grid_' + index"
  >
    {{key}}： {{item}}
  </div>
  <el-input v-model="selection.dataId" placeholder=""></el-input>
</template>

<script>
  import { reactive, watch } from 'vue'
  import { ElPagination, ElInput } from 'element-plus'
  import { createDataList, mykeypager, lifecycle } from '/nf-ui-core'
  import { loading } from '/nf-ui-elp'
  import _gridMeta from './grid.json'
  import _formMeta from '../form/form.json'

</script>

<script setup>
  loading()

  lifecycle('列表控件测试', true)

  const selection = reactive({
    dataId: '', // 单选ID number 、string
    row: {}, // 单选的数据对象 {}
    dataIds: [], // 多选ID []
    rows: [] // 多选的数据对象 []
  })

  // 获取表单控件需要的meta
  const gridMeta = reactive(_gridMeta)
  // 改为插槽
  // formMeta.itemMeta[101].controlType = 1

  const pagerInfo = reactive({
    size: 10, // 一页记录数
    total: 200, // 总数
    count: 20, // 页数
    index: 1 // 当前页号
  })
  
  // 根据 meta 创建表单的 model
  const _dataList = createDataList(_formMeta.itemMeta, pagerInfo.total).reverse()

  const dataList = reactive([])

  watch(() => pagerInfo.index, (index) => {
    console.log(index)
    dataList.length = 0
    const cpp = (pagerInfo.index - 1) * pagerInfo.size
    for(let i=0; i< pagerInfo.size; i++) {
      dataList.push(_dataList[cpp + i])
    }
  }, {immediate:true})

  // 按键翻页
  mykeypager(pagerInfo)

</script>